<template>
  <el-dialog
    v-if="dialogFormVisible1"
    v-model="dialogFormVisible1"
    :title="$t(`pageFactoryReset.modal.${props.resetOption}Title`)"
    width="500"
  >
    <p class="mb-2">
      <strong>{{
        $t(`pageFactoryReset.modal.${props.resetOption}Header`)
      }}</strong>
    </p>
    <li v-for="(v, index) in 2" :key="index" class="mt-1 mb-1">
      {{
        $t(`pageFactoryReset.modal.${props.resetOption}SettingsList.item${v}`)
      }}
    </li>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="open = false">
          {{ $t('global.action.cancel') }}
        </el-button>
        <el-button type="primary" @click="resetBios">
          {{ $t('global.action.confirm') }}
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
    v-if="dialogFormVisible2"
    v-model="dialogFormVisible2"
    :title="$t(`pageFactoryReset.modal.${props.resetOption}Title`)"
    width="500"
  >
    <p class="mb-2">
      <strong>{{
        $t(`pageFactoryReset.modal.${props.resetOption}Header`)
      }}</strong>
    </p>
    <li v-for="(v, index) in 5" :key="index" class="mt-1 mb-1">
      {{
        $t(`pageFactoryReset.modal.${props.resetOption}SettingsList.item${v}`)
      }}
    </li>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="open = false">{{
          $t('global.action.cancel')
        }}</el-button>
        <el-button type="primary" @click="resetToDefaults">
          {{ $t('global.action.confirm') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { useFactoryResetStore } from '@/store/ServicesManagement/FactoryReset/FactoryResetStore';

const factoryResetStore = useFactoryResetStore();

const props = defineProps<{ resetOption: string }>();

const open = ref(false);
defineExpose({ open });

const dialogFormVisible1 = computed({
  get() {
    return props.resetOption === 'resetBios' && open.value;
  },
  set(val) {
    return val;
  },
});
const dialogFormVisible2 = computed({
  get() {
    return props.resetOption === 'resetToDefaults' && open.value;
  },
  set(val) {
    return val;
  },
});

const resetBios = () => {
  open.value = false;
  factoryResetStore
    .resetBios()
    .then((title: string) => {
      ElNotification({
        title: 'Success',
        message: title,
        type: 'success',
      });
    })
    .catch(({ message }: { message: string }) => {
      ElNotification({
        title: 'Error',
        message: message,
        type: 'error',
      });
    });
};

const resetToDefaults = () => {
  open.value = false;
  factoryResetStore
    .resetToDefaults()
    .then((title: string) => {
      ElNotification({
        title: 'Success',
        message: title,
        type: 'success',
      });
    })
    .catch(({ message }: { message: string }) => {
      ElNotification({
        title: 'Error',
        message: message,
        type: 'error',
      });
    });
};
</script>
